<template>
  <div>
    <div class="search">
      <el-form :inline="true" :model="queryParams" size="small">
        <el-form-item label="部门">
          <depart-tree
            style="width: 200px"
            class="depart-tree"
            v-model="queryParams.deptNo"
            :departments="departments"
            @change='handleSearch'
          />
        </el-form-item>
        <!-- <el-form-item label="数据更新时间：">
          <span>{{updatedTime}}</span>
        </el-form-item> -->
        <el-form-item label="姓名">
          <el-input v-model="queryParams.userName" size="small" @blur="handleSearch"/>
        </el-form-item>
        <el-form-item label="上报状态">
          <el-select size="small" v-model="queryParams.reportStatus" @change="handleSearch" clearable>
            <el-option label="已上报" :value="0" />
            <el-option label="健康未上报" :value="1" />
            <el-option label="疫测未上报" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            size="small"
            :picker-options="pickerOptions"
            @change="handleSearch"
            v-model="pickerVal"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label-width="20" label=" ">
          <el-button type="primary" size="mini" @click="handleSearch"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div style="display: flex;">
        <div v-if="checkAuthority('/teacher/eyes')" class="switch-btn cursor iconfont" :class="[isShow ? 'icon-yanjing': 'icon-biyan']" @click="handleClickIsShow"></div>
        <div>
        <el-button v-if="checkAuthority('/teacher/down')" size="mini" type="primary" @click="handleExport">导 出</el-button>
        </div>
      </div>
    </div>
      <acc-table :tableData="tableData" :columnDefs="columnDefs" @click-header-select='handleClickHeaderSelect'>
        <template #order={index}>
          <span>{{index | orderIndex(pageVo)}}</span>
        </template>
        <template #idCard={row}>
          <div>{{isShow && row.idCard.length === 18 ?  $options.filters.idCarDesensitization(row.idCard) : row.idCard}}</div>
        </template>
        <template #contact={row}>
          {{isShow ? $options.filters.cellularPhone(row.contact) : row.contact}}
        </template>
        <template #nucleicAcid="{ row }">
        <div
          v-for="item in row.nucleicAcid"
          :key="item"
          :style="{ color: item === '阴性' ? 'green' : 'red' }"
          >{{ item }}</div
        >
      </template>
      <template #nucleicAcidTime="{ row }">
        <div
          v-for="item in row.nucleicAcidTime"
          :key="item"
          >{{ item }}</div
        >
      </template>
      <template #healthCode="{ row }">
        <div
          v-for="item in row.healthCode"
          :key="item"
          :style="{
            color:
              item === '绿码'
                ? 'green'
                : item === '黄码'
                ? 'yellow'
                : 'red',
          }"
          >{{ item }}</div
        >
      </template>
        <template #vaccines={row}>
          <span>{{row.vaccines === 0 ? '未接种' : `接种${row.vaccines}针`}}</span>
        </template>
        <template #action={row}>
          <el-button type="text" size="mini" disabled v-if="row.status === 1">已通知</el-button>
          <el-button type="text" size="mini" @click="handleInform(row)" v-if="row.status === 0">通知</el-button>
        </template>
      </acc-table>
      <acc-page :total='total' :page-size='pageVo.pageSize' :current-page='pageVo.pageNum'  @current-change='handleChangePage' @size-change='handleChangeSize'></acc-page>
  </div>
</template>

<script>
import { columnDefs } from './mock'
import { queryDeptListBySchoolNo } from '@/views/children/basic/js/teacherInfo'
import DepartTree from '@/views/children/basic/components/departTree'
import { getHealthTracking, exportHealthTracking, notification } from '@/views/children/antiepidemic/js/health'
import { decrypt } from '@/utils/crypto'
import { checkAuthority } from '@/utils/btnPermission' // 页面按钮权限
export default {
  components: { DepartTree },
  props: {
    currentCampus: String,
    updatedTime: String
  },
  data () {
    return {
      isShow: true,
      visible: false,
      pickerVal: [],
      departments: [],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      queryParams: {
        tenantNo: null,
        districtNo: null,
        deptNo: null,
        reportStatus: null
      },
      columnDefs: [],
      tableData: [],
      pageVo: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      gradeOptions: [],
      classOptions: [],
      currentHeaderSelect: []
    }
  },
  created () {
    this.columnDefs = columnDefs
    this.queryDeptListBySchoolNo()
    this.handleSearch()
  },
  watch: {
    currentCampus (newVal) {
      this.queryParams.districtNo = newVal
      this.handleSearch()
    }
  },
  methods: {
    checkAuthority,
    handleClickIsShow () {
      this.isShow = !this.isShow
    },
    queryDeptListBySchoolNo () {
      queryDeptListBySchoolNo({}).then(res => {
        if (res.code === 0) {
          this.departments = res.data
        }
      })
    },
    handleSearch () {
      this.visible = false
      this.pageVo.pageNum = 1
      this.loadDataList()
    },
    loadDataList () {
      getHealthTracking(this.formData()).then(res => {
        res.data = JSON.parse(decrypt(res.data))
        this.tableData = res.data.teacherHealthResp
        this.total = res.data.total
      })
    },
    handleChangePage (page) {
      this.pageVo.pageNum = page
      this.loadDataList()
    },
    handleChangeSize (size) {
      this.pageVo.pageSize = size
      this.handleSearch()
    },
    handleClickHeaderSelect (val) {
      this.currentHeaderSelect = val
      this.handleSearch()
    },
    formData (val) {
      let temp = {}
      let status = {}
      this.currentHeaderSelect.forEach(item => {
        status = { ...status, [item.prop]: item.column.value }
      })
      Object.assign(temp, this.queryParams, status, this.pageVo)
      // 后端导出逻辑问题。。。
      if (val === 'exp') temp.pageSize = this.total
      if (val === 'exp') temp.pageNum = 1
      let userInfo = localStorage.getItem('Standard__User-Info')
      temp.tenantNo = JSON.parse(userInfo).value.tenantNo
      temp.startTime = this.pickerVal?.[0] || ''
      temp.endTime = this.pickerVal?.[1] || ''
      temp.type = 1
      return temp
    },
    handleInform (row) {
      let userInfo = localStorage.getItem('Standard__User-Info')
      // let tenantNo = JSON.parse(userInfo).value.tenantNo
      let tenantNo = JSON.parse(userInfo).value.tenantNo
      let userNo = JSON.parse(userInfo).value.userNo
      let data = {
        antigenStatus: row.antigenResult || '',
        antigenStatusDate: row.antigenTime || '',
        createUser: userNo,
        healthCodeStatus: row.healthCode || '',
        inShFlag: row.isHu || '',
        name: row.name || '',
        nucleicAcidStatus: row.nucleicAcid || '',
        nucleicAcidStatusDate: row.nucleicAcidTime || '',
        passRiskAddr: row.risk || '',
        tenantNo,
        userNo: row.no,
        userType: 1,
        vaccineStatus: row.vaccines,
        notificationDate: this.queryParams.historyTime
      }
      this.$confirm('是否通知?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        notification(data).then(() => {
          this.loadDataList()
          this.$message.success('通知成功')
        })
      }).catch(() => {})
      // savePreMsgNoticeAppealNotReported({ list: [{ tenantNo: tenantNo, userNo: row.no, userType: 0, name: row.name }] }).then(() => {
      //   this.$message.success('通知成功')
      //   this.loadDataList()
      // })
    },
    handleExport () {
      exportHealthTracking(this.formData('exp')).then(() => {
        this.$message.success('导出成功')
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.search {
  display: flex;
  justify-content: space-between;
}
.switch-btn{
  width: 50px;
  height: 30px;
  line-height: 30px;
  font-size: 30px;
  text-align: center;
}
</style>
